import 'package:flutter/material.dart';
import '../../services/ScreenAdaper.dart';
import 'package:dio/dio.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../config/Config.dart';

class ProductListPage extends StatefulWidget {
  Map arguments;
  ProductListPage({required this.arguments}) : super();

  _ProductListPageState createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey =
      new GlobalKey<ScaffoldState>(); // 一个全局Key用来控制右侧的抽屉
  // 商品列表
  Widget _productListWidget() {
    return Container(
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.only(top: 50.h), // 配合顶部的切换按钮高度来设置的
      child: ListView.builder(
        itemBuilder: (context, index) {
          //每一个元素
          return Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Container(
                    width: 180.w,
                    height: 180.h,
                    child: Image.network(
                        "https://www.itying.com/images/flutter/list2.jpg",
                        fit: BoxFit.cover),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 180.h,
                      margin: EdgeInsets.only(left: 10),
                      // color: Colors.red,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                              "戴尔(DELL)灵越3670 英特尔酷睿i5 高性能 台式电脑整机(九代i5-9400 8G 256G)",
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis),
                          Row(
                            children: <Widget>[
                              Container(
                                height: 36.h,
                                margin: EdgeInsets.only(right: 10),
                                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),

                                //注意 如果Container里面加上decoration属性，这个时候color属性必须得放在BoxDecoration
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: Color.fromRGBO(230, 230, 230, 0.9),
                                ),

                                child: Text("4g"),
                              ),
                              Container(
                                height: 36.h,
                                margin: EdgeInsets.only(right: 10),
                                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(10),
                                  color: Color.fromRGBO(230, 230, 230, 0.9),
                                ),
                                child: Text("126"),
                              ),
                            ],
                          ),
                          Text(
                            "¥990",
                            style: TextStyle(color: Colors.red, fontSize: 16),
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),
              Divider(height: 20)
            ],
          );
        },
        itemCount: 10,
      ),
    );
  }

  // 筛选导航
  Widget _subHeaderWidget() {
    return Positioned(
      top: 0,
      height: 50.h,
      width: 360.w,
      child: Container(
        width: 360.w,
        height: 50.h,
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    width: 1, color: Color.fromRGBO(233, 233, 233, 0.9)))),
        child: Row(
          children: <Widget>[
            Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                    child: Text(
                      '综合',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.red),
                    ),
                  ),
                  onTap: () {},
                )),
            Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                    child: Text('销量', textAlign: TextAlign.center),
                  ),
                  onTap: () {},
                )),
            Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                    child: Text(
                      '价格',
                      textAlign: TextAlign.center,
                    ),
                  ),
                  onTap: () {},
                )),
            Expanded(
                flex: 1,
                child: InkWell(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 16.h, 0, 16.h),
                    child: Text(
                      '筛选',
                      textAlign: TextAlign.center,
                    ),
                  ),
                  onTap: () {
                    _scaffoldKey.currentState?.openEndDrawer(); // 点击筛选按钮打开抽屉
                  },
                )),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          leading: Builder(
            builder: (BuildContext context) {
              // final ScaffoldState scaffold = Scaffold.maybeOf(context);
              // final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
              // final bool hasEndDrawer = scaffold.hasEndDrawer;
              // final bool canPop = parentRoute.canPop;

              // if (hasEndDrawer && canPop) {
              return BackButton();
              // } else {
              //   return SizedBox.shrink();
              // }
            },
          ),
          title: Text("商品列表"),
          actions: <Widget>[Text('')], // 这行代码去掉了右侧顶部的开启抽屉的那个按钮
        ),
        // body:Text("${widget.arguments}")
        endDrawer: Drawer(
          // 新增了抽屉功能--左滑动打开，或者点击右侧头部打开
          child: Container(
            child: Text('实现筛选功能的抽屉'),
          ),
        ),
        body: Stack(
          children: <Widget>[_productListWidget(), _subHeaderWidget()],
        ));
  }
}
